<template>
    <div class="sort">
        <span v-html="text"></span>
        <a @click="descClick" v-if="desc" style="margin-left: -5px;">
            <svg class="down" viewBox="0 0 1031 1024" version="1.1" p-id="18463" width="24" height="24"><path d="M608.8594 861.017378c-16.78357 0-30.331754-13.548183-30.331754-30.331754V272.78357c0-16.78357 13.548183-30.331754 30.331754-30.331753 8.088468 0 15.772512 3.235387 21.636651 9.099526l11.526066 11.728278 0.808847-0.808847 131.437598 131.437599c11.121643 11.121643 11.121643 29.118483 0 40.240126-5.459716 5.459716-12.537125 8.290679-20.018957 8.29068-7.684044 0-14.761453-3.033175-20.221169-8.29068l-94.635071-94.635071v491.374408c-0.202212 16.581359-13.750395 30.129542-30.533965 30.129542z" :opacity="sort==descindex?1:0.3"></path></svg>
        </a>
        <a @click="ascClick" v-if="asc">
            <svg class="up" viewBox="0 0 1031 1024" version="1.1" p-id="18463" width="24" height="24"><path d="M608.8594 861.017378c-16.78357 0-30.331754-13.548183-30.331754-30.331754V272.78357c0-16.78357 13.548183-30.331754 30.331754-30.331753 8.088468 0 15.772512 3.235387 21.636651 9.099526l11.526066 11.728278 0.808847-0.808847 131.437598 131.437599c11.121643 11.121643 11.121643 29.118483 0 40.240126-5.459716 5.459716-12.537125 8.290679-20.018957 8.29068-7.684044 0-14.761453-3.033175-20.221169-8.29068l-94.635071-94.635071v491.374408c-0.202212 16.581359-13.750395 30.129542-30.533965 30.129542z" :opacity="sort==ascindex?1:0.3"></path></svg>
        </a>
        <u @click="sortClick" v-if="!asc && !desc">
            <svg viewBox="0 0 1024 1024" version="1.1" width="16" height="16"><path d="M156.392727 656.523636a43.52 43.52 0 0 1 61.207273 7.214546l113.105455 144.058182V90.298182a43.752727 43.752727 0 1 1 87.272727 0v843.403636a43.752727 43.752727 0 0 1-29.323637 41.425455 42.123636 42.123636 0 0 1-14.196363 2.327272 43.287273 43.287273 0 0 1-34.210909-16.756363L148.945455 717.730909a43.52 43.52 0 0 1 7.447272-61.207273zM634.414545 48.872727a43.752727 43.752727 0 0 1 48.64 14.429091l191.069091 242.967273a43.752727 43.752727 0 1 1-69.818181 53.992727l-111.941819-144.058182v717.498182a43.752727 43.752727 0 1 1-87.272727 0V90.298182a44.218182 44.218182 0 0 1 29.323636-41.425455z" :opacity="sort==index?1:0.3"></path></svg>
        </u>
    </div>
</template>

<script setup>
    const emit = defineEmits(['update:sort','ascClick','descClick','sortClick'])

    const props = defineProps({
        text:  { type: String, default: "" },
        asc:   { type: Boolean, default: false },
        ascindex: { type: Number, default: 0 },
        desc:  { type: Boolean, default: false },
        descindex: { type: Number, default: 0 },
        sort: { type: Number, default: 0 },
        index: { type: Number, default: 0 }
    })

    let ascClick = e => {
        emit('update:sort', props.ascindex)
        emit('ascClick', e)
    }
    let descClick = e => {
        emit('update:sort', props.descindex)
        emit('descClick', e)
    }
    let sortClick = e => {
        emit('update:sort', props.index)
        emit('sortClick', e)
    }
</script>

<style scoped lang="scss">
    .sort { display: flex; align-items: center;
        .down { transform: rotate(180deg); margin-left: 3px; }
        .up { margin-left: -9px; }
        :is(a) { width: 14px; overflow: hidden; 
            &:hover { transform: scale(1.2); }
        }
        :is(u) { cursor: pointer; margin-left: 3px;
            &:hover { transform: scale(1.1); }
        }
    }
</style>